<!-- 自定义页面 -->
<template>
  <view class="home-wrap u-m-b-20">
    <!-- 空白页 -->
    <u-no-network @retry="init"></u-no-network>
    <shopro-empty
      v-if="isEmpty"
      :image="$IMG_URL + '/imgs/empty/template_empty.png'"
      tipText="暂未找到模板，请前往装修~"
    ></shopro-empty>

    <view v-else-if="isRefresh" class="content-box">
      <!-- 自定义模块 -->
      <view class="template-box">
        <block v-for="(item, index) in viewTemplate" :key="item.id">
          <!-- 轮播 -->
          <sh-banner
            v-if="item.type === 'banner'"
            :Px="item.content.x"
            :Py="item.content.y"
            :borderRadius="item.content.radius"
            :height="item.content.height"
            :list="item.content.list"
          ></sh-banner>

          <!-- 搜索 -->
          <sh-search v-if="item.type === 'search'"></sh-search>

          <!-- 滑动宫格 -->
          <sh-grid-swiper
            v-if="item.type === 'menu'"
            :list="item.content.list"
            :oneRowNum="item.content.style"
          ></sh-grid-swiper>

          <!-- 推荐商品 -->
          <sh-hot-goods
            v-if="item.type === 'goods-list' || item.type === 'goods-group'"
            :detail="item.content"
          ></sh-hot-goods>
          <!-- 广告魔方 -->
          <sh-adv v-if="item.type === 'adv'" :detail="item.content"></sh-adv>
          <!-- 优惠券 -->
          <sh-coupon
            v-if="item.type === 'coupons'"
            :detail="item.content"
          ></sh-coupon>
          <!-- 秒杀-->
          <sh-seckill
            v-if="item.type === 'seckill'"
            :detail="item.content"
          ></sh-seckill>
          <!-- 拼团 -->
          <sh-groupon
            v-if="item.type === 'groupon'"
            :detail="item.content"
          ></sh-groupon>
          <!-- 富文本 -->
          <sh-richtext
            v-if="item.type === 'rich-text'"
            :richId="item.content.id"
          ></sh-richtext>
          <!-- 功能列表 -->
          <sh-cell
            v-if="item.type === 'nav-list'"
            :list="item.content.list"
          ></sh-cell>
          <!-- 九宫格列表 -->
          <sh-grid
            v-if="item.type === 'grid-list'"
            :detail="item.content.list"
          ></sh-grid>
          <!-- 功能标题 -->
          <sh-title-card
            v-if="item.type === 'title-block'"
            :title="item.content.name"
            :bgImage="item.content.image"
            :titleColor="item.content.color"
          ></sh-title-card>
          <!-- 钱包 -->
          <sh-wallet v-if="item.type === 'wallet-card'"></sh-wallet>
          <!-- 订单卡片 -->
          <sh-order-card v-if="item.type === 'order-card'"></sh-order-card>
          <!-- 直播 -->
          <!-- #ifdef MP-WEIXIN -->
          <sh-live
            v-if="item.type === 'live' && HAS_LIVE"
            :detail="item.content"
          ></sh-live>
          <!-- #endif -->
        </block>
      </view>
      <!-- 分类选项卡 -->
      <sh-category-tabs
        v-if="
          categoryTabsData &&
          categoryTabsData.category_arr &&
          categoryTabsData.category_arr.length
        "
        :enable="enable"
        :styleType="categoryTabsData.style"
        :tabsList="categoryTabsData.category_arr"
      ></sh-category-tabs>
      <!-- 登录提示 -->
      <shopro-auth-modal></shopro-auth-modal>
      <!-- #ifdef H5 -->
      <view class="tabbar-hack" style="height: 120rpx; width: 100%"></view>
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
import shBanner from "./components/sh-banner.vue";
import shGridSwiper from "./components/sh-grid-swiper.vue";
import shHotGoods from "./components/sh-hot-goods.vue";
import shAdv from "./components/sh-adv.vue";
import shCoupon from "./components/sh-coupon.vue";
import shSeckill from "./components/sh-seckill.vue";
import shGroupon from "./components/sh-groupon.vue";
import shRichtext from "./components/sh-richtext.vue";
import shCell from "./components/sh-cell.vue";
import shGrid from "./components/sh-grid.vue";
import shTitleCard from "./components/sh-title-card.vue";
import shOrderCard from "./components/sh-order-card.vue";
import shWallet from "./components/sh-wallet.vue";
import shSearch from "./components/sh-search.vue";
import shCategoryTabs from "./components/sh-category-tabs.vue";
import { mapMutations, mapActions, mapState, mapGetters } from "vuex";

// #ifdef MP-WEIXIN
import { HAS_LIVE } from "@/env";
import shLive from "./components/sh-live.vue";
// #endif

// #ifdef H5
let listenMove = document.body; //禁止手机h5下拉刷新带动整个页面。
let handle = function (e) {
  e.preventDefault();
};
// #endif

export default {
  components: {
    shBanner,
    shGridSwiper,
    shGroupon,
    shHotGoods,
    shAdv,
    shCoupon,
    shSeckill,
    shRichtext,
    shCell,
    shGrid,
    shTitleCard,
    shWallet,
    shOrderCard,
    shSearch,
    shCategoryTabs,

    // #ifdef MP-WEIXIN
    shLive,
    // #endif
  },
  data() {
    return {
      // #ifdef MP-WEIXIN
      HAS_LIVE: HAS_LIVE,
      // #endif
      enable: false, //是否开启吸顶。
      isScorll: false,
      viewTemplate: [], //自定义模板数据
      isEmpty: false,
      isRefresh: false, //刷新
      categoryTabsData: {}, //分类选项卡
    };
  },
  computed: {
    ...mapGetters(["isLogin"]),
  },
  onPullDownRefresh() {
    this.getViewTemplate();
  },
  onPageScroll(e) {
    this.isScorll = e.scrollTop > 100 ? true : false;
  },
  onShow() {
    let that = this;
    this.enable = true;
    this.isLogin && this.getCartList();
  },
  onHide() {
    this.enable = false;
  },
  onLoad() {
    this.getViewTemplate();
  },
  methods: {
    ...mapActions(["getCartList"]),
    // 初始化
    getViewTemplate() {
      let that = this;
      that.isRefresh = false;
      that
        .$http("common.custom", {
          custom_id: that.$Route.query.id,
        })
        .then((res) => {
          uni.stopPullDownRefresh();
          that.isRefresh = true;
          if (res.code == 1) {
            that.viewTemplate = res.data.template;
            that.isEmpty = !that.viewTemplate.length;
            that.categoryTabsData =
              that.viewTemplate[that.viewTemplate.length - 1].content;
            uni.setNavigationBarTitle({
              title: res.data.name,
            });
          }
        });
    },
  },
};
</script>

<style lang="scss"></style>
